<template>
    <div id="app" class="pusher">
        <template v-if="mobile">
            <div style="text-align: center;padding-top: 50px;background-color: #fafafa;padding-bottom: 30px">
                尚未适配手机端，请使用PC浏览
            </div>
        </template>
        <template v-else>
            <transition name="fade">
                <div class="dark" v-show="dark"></div>
            </transition>
            <transition name="fade">
                <Screen class="screen" v-if="screen"></Screen>
            </transition>
            <router-view></router-view>
            <Menu></Menu>
            <Search></Search>
            <ToTop></ToTop>
        </template>
    </div>
</template>

<script>

    import Screen from './components/Screen.vue'
    import Menu from "./pages/menu/Menu";
    import Search from "./components/Search";
    import ToTop from "./components/ToTop";


    export default {
        name: 'app',
        components: {
            // Index,
            Screen,
            Menu,
            Search,
            ToTop,
        },
        data() {
            return {
                mobile: this.isMobile()
            }
        },
        created() {
        },
        computed: {
            screen() {
                return this.$store.state.screen
            },
            dark() {
                return this.$store.state.dark;
            }
        },
        methods: {
            isMobile() {
                let flag = navigator.userAgent.match(
                    /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                );
                return flag;
            }

        }


    }


</script>
<style lang="scss">
    #app {
        /*font-family: alibabafont, serif !important;*/
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;

    }

    .screen {
        z-index: 99;
        position: fixed;
    }


    /*******      滚动条样式      ***********/
    /*::-webkit-scrollbar*/
    /*{*/
    /*    width: 10px;*/
    /*}*/
    /*!*定义滚动条轨道 内阴影+圆角*!*/
    /*::-webkit-scrollbar-track {*/
    /*    !*border-radius: 10px;*!*/
    /*    background-color: #efbc72;*/
    /*}*/
    /*!*定义滑块 内阴影+圆角*!*/
    /*::-webkit-scrollbar-thumb*/
    /*{*/
    /*    border-radius: 10px;*/
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    /*    background-color: cadetblue;*/
    /*}*/

    ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 13px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }


    ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 6px;
        border: 2px solid gray;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
                        45deg,
                        rgba(255, 255, 255, 0.4) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(255, 255, 255, 0.4) 50%,
                        rgba(255, 255, 255, 0.4) 75%,
                        transparent 75%,
                        transparent
        );
    }

    ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: #66da81;
        background-image: -webkit-linear-gradient(
                        45deg,
                        rgba(255, 255, 255, 0.4) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(255, 255, 255, 0.4) 50%,
                        rgba(255, 255, 255, 0.4) 75%,
                        transparent 75%,
                        transparent
        );
        border-radius: 10px;
    }

    .dark {
        width: 100%;
        height: 100vh;
        opacity: 0.4;
        position: fixed;
        pointer-events: none;
        background-color: black;
        z-index: 999;
    }
    .fade-enter-active {
        transition: opacity .1s;
    }

    .fade-leave-active {
        transition: opacity .3s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>
